<!-- 收藏列表 -->
<template>
	<view class="page_box">
		<!-- 总收藏数 -->
		<view class="head_box u-flex u-row-between" v-show="!isEmpty">
			<view class="count-box">
				共
				<text class="all-num">{{ total }}</text>
				件商品
			</view>
			 <button class="set-btn u-reset-button" @tap="onSet">{{ isEdit ? '完成' : '编辑' }}</button> 
		</view>

		<!-- 收藏列表 -->
		<view class="content_box">
			<scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box">
				<u-checkbox-group @change="checkboxGroupChange" activeColor="#e9b461">
					<view class="collect-list u-flex" v-for="f in favoriteList" :key="f.id">
						<u-checkbox v-show="isEdit" :name="f.id" shape="circle" v-model="f.checked"></u-checkbox>
						<ljshop-mini-card
							:image="f.product.medium[0].source"
							:title="f.product.name"
							:price="f.product.price"
							:originPrice="f.product.marketPrice"
							:subtitle="f.product.caption"
							@click="$Router.push({ path: '/pages/goods/detail', query: { id: f.productId } })"
						></ljshop-mini-card>
					</view>
				</u-checkbox-group>
				<!-- 缺省页 -->
				<ljshop-empty
					v-if="isEmpty"
					:image="$IMG_URL + '/imgs/empty/empty_goods.png'"
					tipText="暂无收藏"
					btnText="去首页逛逛"
					@click="$Router.pushTab('/pages/index/index')"
				></ljshop-empty>
				<!-- 更多 -->
				<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
			</scroll-view>
		</view>
		<view class="foot_box ">
			<view class="tools-box u-flex u-row-between u-flex-1" v-show="isEdit && !isEmpty">
				<u-checkbox shape="circle" activeColor="#e9b461" @change="onAllSel" v-model="isAllSel"><text>全选</text></u-checkbox>
				<button class="u-reset-button close-btn" @tap="cancelFavorite">取消收藏</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			isEmpty: false,
			isEdit: false,
			isAllSel: false, //是否全选
			selList: [],
			favoriteList: [],
			total: 0,
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 0,
			hasMroe:true,
		};
	},
	computed: {},
	
	// onLoad() {
	// 	this.getFavoriteList();
	// },
	onShow() {
		this.getFavoriteList();
	},
	
	methods: {
		// 单选
		checkboxGroupChange(e) {
			this.selList = e;
			// this.selList = e.toString();
			this.isAllSel = this.favoriteList.every(item => item.checked);
		},

		// 编辑
		onSet() {
			this.isEdit = !this.isEdit;
		},

		// 全选
		onAllSel(e) {
			this.isAllSel = e.value;
			this.selList = [];
			this.favoriteList.forEach(item => {
				e.value && this.selList.push(item.id);
				this.$set(item, 'checked', e.value);
			});
		},

		// 收藏列表
		getFavoriteList() {
			let that = this;
			let list = [];
			that.loadStatus = 'loadmore';
			that.$http('user.favoriteList', {
				current: that.currentPage,
				pageSize: 10,
			}).then(res => {	
				if (res.code == 1) {
					list = res.data;
					list.map(item => {
						that.$set(item, 'checked', false);
					});
					
					// 修改图片字段
					for (let i = 0; i < list.length; i++) {
					  list[i].product.medium = JSON.parse(list[i].product.medium)
					}
					 
					if(that.currentPage == 1){
						that.favoriteList = list;
					} else if(res.data.length > 0) {
						that.favoriteList=that.favoriteList.concat(list)
					}else{
						this.currentPage -= 1
					}
					// 总数
					this.total = that.favoriteList.length;	
					
					if( res.data.length<10){
						that.loadStatus = 'nomore';
						that.hasMroe =false;
					}
				}
			});
		},
		
		// 加载更多
		loadMore() {
			if(this.hasMroe){
				this.currentPage += 1;
				this.getFavoriteList();
			}
		},

		// 取消收藏
		cancelFavorite() {
			let that = this;
			uni.showLoading({
				
			})
			let { favoriteList, selList } = this;
			console.log(selList);
			//console.info(JSON.stringify(selList))
			favoriteList = JSON.parse(JSON.stringify(favoriteList));
			that.$http('goods.favoriteDelete', {
				// ids: JSON.stringify(selList)
				ids: selList
			}).then(res => {
				if (res.code) {
					that.getFavoriteList()
					uni.hideLoading()
				}
			});
		}
	}
};
</script>

<style lang="scss">
.head_box {
	height: 70rpx;
	padding: 0 30rpx;

	.count-box {
		font-size: 26rpx;
		color: #999;

		.all-num {
			color: #a8700d;
		}
	}

	.set-btn {
		background: none;
		font-size: 26rpx;
		color: #a8700d;
		padding: 20rpx;
	}
}

.collect-list {
	padding: 30rpx 20rpx;
	background: #fff;
	width: 750rpx;
	margin-bottom: 20rpx;
}

.tools-box {
	height: 100rpx;
	width: 750rpx;
	padding: 0 20rpx;
	background: #fff;
	.close-btn {
		width: 200rpx;
		line-height: 70rpx;
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		border-radius: 35rpx;
		padding: 0;
		color: rgba(#fff, 0.9);
	}
}
</style>
